<template>
  <div>
    <el-form-item label="分隔符">
      <el-input v-model="localData.separator" />
    </el-form-item>
    <el-form-item label="分隔符图标">
      <icon-picker v-model="localData.separatorIcon" />
    </el-form-item>
    <el-form-item label="支持跳转">
      <el-switch v-model="localData.supportTo" />
    </el-form-item>
    <el-form-item label="文本内容">
      <el-button type="primary" link @click="openDialog">配置</el-button>
    </el-form-item>

    <drag-dialog v-model="showDialog" title="面包屑文本配置" :close-on-click-modal="false">
      <add-button @click="handleAdd" text="增加" />
      <el-table :data="curItems" border>
        <el-table-column prop="label" label="标题内容" align="center">
          <template #default="scope">
            <el-input v-model="scope.row.label" />
          </template>
        </el-table-column>
        <el-table-column prop="supportTo" label="支持跳转" width="80" align="center">
          <template #default="scope">
            <el-switch v-model="scope.row.supportTo" />
          </template>
        </el-table-column>
        <el-table-column prop="toType" label="跳转参数类型" width="200" align="center">
          <template #default="scope">
            <el-radio-group v-model="scope.row.toType">
              <el-radio-button label="JSON串" value="json" />
              <el-radio-button label="用户函数" value="func" />
            </el-radio-group>
          </template>
        </el-table-column>
        <el-table-column prop="to" label="跳转参数对象" align="center">
          <template #default="scope">
            <el-select v-if="scope.row.toType == 'func'" v-model="scope.row.to" clearable>
              <el-option v-for="opt in getPageFuncs()" :key="opt.funcName" :label="opt.funcLabel" :value="opt.funcName" />
            </el-select>
            <el-input type="textarea" v-else v-model="scope.row.to" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="80">
          <template #default="scope">
            <text-delete-button @click="handleDelete(scope.$index)" />
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <dialog-footer @ok="submit" @cancel="cancel" />
      </template>
    </drag-dialog>
  </div>
</template>

<script>
import { IconPicker } from '@/components/IconPicker';
import { cloneDeep } from 'lodash-es';

export default {
  name: 'BreadCrumbConfig',
  components: { IconPicker },
  props: {
    data: {
      type: Object,
      default: () => {}
    },
    formJson: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      localData: {},
      showDialog: false,
      curItems: []
    };
  },
  watch: {
    data: {
      handler(newVal) {
        if (newVal) {
          this.localData = newVal;
        }
      },
      deep: true,
      immediate: true
    },
    localData: {
      handler(newVal) {
        this.$emit('update:data', newVal);
      },
      deep: true
    }
  },
  methods: {
    openDialog() {
      this.curItems = cloneDeep(this.localData.items || []);
      this.showDialog = true;
    },
    submit() {
      this.localData.items = this.curItems;
      this.showDialog = false;
    },
    cancel() {
      this.showDialog = false;
    },
    handleAdd() {
      this.curItems.push({
        toType: 'json',
      });
    },
    handleDelete(index) {
      this.curItems.splice(index, 1);
    },
    getPageFuncs() {
      return this.formJson.funcs ?? [];
    }
  }
};
</script>
